<template>
	<view class="card page">
		<view class="yf-form">
			<text class="label">卡号</text>
			<input disabled="disabled" v-model="mallCard.code" class="inp" type="text">
		</view>
		<view class="yf-form">
			<text class="label">积分</text>
			<input disabled="disabled" v-model="mallCard.point" class="inp" type="text" >
		</view>
		<view class="yf-form">
			<text class="label">现金</text>
			<input disabled="disabled" v-model="mallCard.cash" class="inp" type="text">
		</view>
		<view class="btn" @click="use" v-if="mallCard&&!mallCard.userId">
			使用
		</view>
	</view>
</template>
<script>
	import {mapState} from 'vuex'
	import {getCard,useCard} from '@/api/card'
	import {showCorrect} from '@/toast'
	export default {
		onLoad(options) {
			console.log(options)
			// console.log(query)
		},
		data(){
			return {
				code:null,
				mallCard:null
			}
		},
		onShow(){
			this.code = decodeURIComponent(this.options.query.q).split("code=")[1]
			getCard(this.code).then(res=>{
				this.mallCard = res.data
			})
		},
		methods:{
			use(){
				useCard(this.code).then(res=>{
					showCorrect("使用成功!")
					this.$Router.pushTab("/pages/my/my")
				})
			}
		},
		computed:{
			...mapState({
				options:state=>state.wx.options
			})
		}
	}
</script>

<style lang="stylus">
	.card
		background-color #EFEFEF
		.yf-form
			border-bottom 1px solid #DCDCDC
			height 105upx
			background-color white
			display flex
			align-items center
			padding 0 30upx
			.label
					min-width 120upx
					color #6F6F6F
					font-size 28upx
					margin-right 40upx
			.inp
				width 100%
				font-size 28upx
				color #A1A1A1
		.btn
			position absolute
			bottom 20upx
			left 20upx
			right 20upx
			height:80upx;
			background:#F7895E
			border-radius:30px
			color #FFFFFF
			font-size 28upx
			display flex
			align-items center
			justify-content center
			margin-top 23upx
</style>
